<template>
  <view class="notification-list" v-if="notifications.length > 0">
    <view
      class="notification-item"
      v-for="item in notifications"
      :key="item.oId"
      @click="handleNotificationClick(item)"
      :class="{ unread: !item.hasRead }"
    >
      <view class="notification-avatar">
        <image
          class="avatar"
          :src="item.thumbnailURL"
          mode="aspectFill"
        ></image>
      </view>

      <view class="notification-content">
        <view class="notification-header">
          <text class="notification-title">{{ item.authorName }}</text>
          <text class="notification-time">{{
            formatTime(item.createTime)
          }}</text>
        </view>

        <view class="notification-body">
          <text class="notification-text">{{ formatContent(item) }}</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 空状态提示 -->
  <view class="empty-state" v-else-if="!loading">
    <FeatherIcon name="inbox" size="55" color="#999" />
    <text class="empty-text">暂无关注动态</text>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
import FeatherIcon from "@/components/FeatherIcon.vue";
import { timeAgo } from "@/utils/common.js";

const props = defineProps({
  notifications: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["notification-click"]);

// 处理通知点击
const handleNotificationClick = (notification) => {
  emit("notification-click", notification);
};

// 格式化通知内容
const formatContent = (item) => {
  if (!item) return "";

  try {
    let content = item.content || "";
    if (item.articleTitle) {
      content = `${content} - ${item.articleTitle}`;
    }
    return String(content)
      .replace(/<[^>]*>/g, " ")
      .replace(/\s+/g, " ")
      .trim();
  } catch (error) {
    console.error("格式化内容错误", error);
    return String(item.content || "");
  }
};

// 格式化时间显示
const formatTime = (timestamp) => {
  if (!timestamp) return "";

  try {
    // 处理CST格式的时间字符串
    if (typeof timestamp === "string" && timestamp.includes("CST")) {
      // 将CST时间字符串转换为Date对象
      const dateStr = timestamp.replace("CST", "GMT+0800");
      const date = new Date(dateStr);
      if (!isNaN(date.getTime())) {
        return timeAgo(date.getTime());
      }
    }

    // 原有的处理逻辑
    return timeAgo(timestamp);
  } catch (err) {
    console.error("格式化时间错误", err);
    return "";
  }
};
</script>

<style lang="scss">
@import "@/pages/notification/notification.scss";
</style>
